<template>
  <div>
    <div class="flow-analyse-container">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>
      <h1>城际班线车流量分析</h1>
      <div class="content scroll-styled">
        <div class="left">
          <h2>始发站</h2>
          <p v-for="(item, index) of pointData" :key="index" v-show="item.type===state">武威</p>
        </div>
        <div class="left">
          <h2>终点站</h2>
          <p v-for="(item, index) of pointData" :key="index" v-show="item.type===state">{{item.name}}</p>
        </div>
        <div class="left">
          <h2>客流量</h2>
          <p v-for="(item, index) of pointData" :key="index" v-show="item.type===state">{{item.count * 80}}</p>
        </div>
      </div>
    </div>
    <div class="buttoms-container">
      <!-- <button class="date-picker" @click="setDate">{{dateY}}.{{dateM}}.{{dateD}}...<i :class="datePicking?'up':'down'" /></button>
      <Calendar v-if="datePicking" @timeEvent="setHisTime" :calendar="calendarNow"/> -->
      <button @click="setState(0)" :class="{active:state===0}">省际客车</button>
      <button @click="setState(1)" :class="{active:state===1}">市际客车</button>
      <button @click="setState(2)" :class="{active:state===2}">县际客车</button>
      <button @click="setState(3)" :class="{active:state===3}">县内客车</button>
    </div>
    <button @click="returnMenu" class="return">退出</button>
  </div>
</template>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";

  .flow-analyse-container {
    color: $font-color-normal;
    position: absolute;
    top: 85px;
    left: 18px;
    height: 410px;
    width: 305px;
    @include borderBlur;
    pointer-events: auto;

    .icon {
      position: absolute;
      z-index: 10;
      width: 14px;
      height: 14px;
      &.top-left-icon {
        top: -2px;
        left: -2px;
        background: url("../../../static/images/index/top-left.png") no-repeat left top;
      }
      &.top-right-icon {
        top: -2px;
        right: -2px;
        background: url("../../../static/images/index/top-right.png") no-repeat right top;
      }
      &.bottom-left-icon {
        bottom: -2px;
        left: -2px;
        background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
      }
      &.bottom-right-icon {
        bottom: -2px;
        right: -2px;
        background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
      }
    }

    h1 {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      height: 30px;
      margin: 15px 0 10px 0;
      line-height: 30px;
    }

    .content {
      display: flex;
      text-align: center;
      justify-content: space-between;
      padding: 0 20px 0 15px;
      height: 350px;

      h2 {
        font-size: 20px;
        font-weight: bold;
      }

      p {
        margin-bottom: 18px;
        font-size: 20px;
      }
    }
  }

  .buttoms-container {
    position: absolute;
    top: 85px;
    left: 335px;
    pointer-events: auto;     //浮在地图上，其父元素禁用了鼠标事件，这里解除

    button {
      display: block;
      width: 165px;
      height: 46px;
      font-size: $font-big;
      /*background: linear-gradient(#1f3052, #1e283b);*/
      background: #4A8074;
      box-sizing: border-box;
      border: 2px solid transparent;
      cursor: pointer;
      color: $font-color-normal;
      font-weight: bold;
      margin-bottom: 10px;
      outline: none;

      &.active {
        background: linear-gradient(#3a97a8, #0b5d74);
        border: 2px solid #2e4e5d;
      }
    }

    .date-picker {
      i {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 30px;
        background: url("../../../static/images/index/tog-down.png") no-repeat center;
        background-size: 16px 14px;
        transform: rotate(360deg);
        transition: all ease 0.3s;
        cursor: pointer;
        &.up{
          transform: rotate(180deg) translateY(5px);
          transition: all ease 0.3s;
        }
      }
    }
  }

  .return {
    width: 65px;
    height: 65px;
    position: absolute;
    top: 90px;
    right: 20px;
    font-size: $font-big;
    color: #fff;
    pointer-events: auto;     //浮在地图上，其父元素禁用了鼠标事件，这里解除
    cursor: pointer;
    @include borderBlur;
  }
</style>

<script>
import Calendar from '../../components/sub-home/calendar';
import DateTimeHelper from '../../util/datetime-helper';
import eventBus from '../../util/event-bus';
import {mapGetters, mapActions} from 'vuex';

const mapCamera = [
  {
    center: [105.142345, 38.371406],
    zoom: 6.87
  },
  {
    center: [100.408376, 37.913415],
    zoom: 6.785
  },
  {
    center: [102.723602, 38.177669],
    zoom: 7.785
  },
  {
    center: [102.633252, 37.717860],
    zoom: 9.070
  },
]

export default {
  name: "od-home",

  data: function () {
    return {
      state: 0,
      datePicking: false,
      dateY: 2018,
      dateM: 11,
      dateD: 21,
      max: 0,
      min: 0,
      pointData: [],
      lineData: []
    }
  },

  computed: {
    ...mapGetters({
      odData: "od/odData"
    })
  },

  mounted: function() {
    this.getOdData();
  },

  watch: {
    odData: function(newVal, oldVal) {
      newVal.forEach((item) => {
        const mag = parseInt(item.mag);
        this.pointData.push({
          name: item.eName,
          count: mag,
          value: [parseFloat(item.eLng), parseFloat(item.eLat)],
          type: item.type
        });

        this.lineData.push({
          name: item.sName,
          count: mag,
          dest: item.eName,
          coords: [[parseFloat(item.sLng), parseFloat(item.sLat)], [parseFloat(item.eLng), parseFloat(item.eLat)]],
          type: item.type
        });

        if (mag > this.max) this.max = mag;
        if (mag < this.min) this.min = mag;
      });

      this.draw();
    }
  },

  methods: {
    setDate: function () {
      if (this.datePicking) {
        this.datePicking = false;
      } else {
        this.datePicking = true;
      }
    },

    setState: function (newState) {
      if (this.state !== newState) {
        this.state = newState;
        this.draw();
      }
    },

    returnMenu: function () {
      this.$emit("changestate", "home");
    },

    setHisTime: function (data) {
      this.setTime(data.year, data.month, data.day);
      this.datePicking = false;
    },

    setTime: function (year, month, day) {
      this.dateY = (year);
      this.dateM = parseInt(month) > 9 ? month : "0" + parseInt(month);
      this.dateD = parseInt(day) > 9 ? day : "0" + parseInt(day);
      this.calendarNow = {
        year: parseInt(year),
        month: parseInt(month),
        day: parseInt(day)
      }
    },
    draw: function() {
      if (this.pointData.length && this.lineData.length) {
        const newPoint = this.pointData.filter((item, index) => {
          return item.type === this.state;
        });
        const newLine = this.lineData.filter((item, index) => {
          return item.type === this.state;
        });

        eventBus.$emit('drawOd', newLine, newPoint, this.max, this.min, mapCamera[this.state].center, mapCamera[this.state].zoom);
      }
    },
    ...mapActions({
      getOdData: "od/getOdData"
    }),
  },

  created: function () {
    const formatedCurDate = DateTimeHelper.formCurDate();   //初始化当前年月日
    const curTime = formatedCurDate.split(/[.: ]/);
    this.setTime(curTime[0], curTime[1], curTime[2]);
  },

  components: {
    Calendar,
    DateTimeHelper
  },

  beforeDestroy: function() {
    eventBus.$emit('distoryOd');
  }
}
</script>


